import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import api from '../utils/api';

const Register = () => {
  const [form, setForm] = useState({
    username: '',
    password: '',
    email: ''
  });
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleRegister = async (e) => {
    e.preventDefault();
    setError('');

    try {
      const response = await api.post('/auth/register', form);
      if (response.data.status === 'success') {
        navigate('/login');
      } else {
        setError(response.data.message || '注册失败');
      }
    } catch (err) {
      setError('服务器错误，请稍后再试');
      console.error('注册失败：', err);
    }
  };

  return (
    // 同样使用全屏居中布局
    <div style={{
      display: 'flex',
      justifyContent: 'center', // 水平居中
      alignItems: 'center',     // 垂直居中
      width: '100vw',           // 宽度占满整个视口
      height: '100vh',          // 高度占满整个视口
      backgroundColor: 'White', // 白色背景，与注册页统一
      padding: '20px',          // 适当内边距，避免内容紧贴边缘
      boxSizing: 'border-box',
      overflow: 'auto'          // 内容过多时允许滚动
    }}>
      {/* 登录卡片：保持居中，但不再限制最大宽度 */}
      <div style={{
        width: '100%',
        maxWidth: '400px',       // 最大宽度限制，在大屏幕上保持适当大小
        backgroundColor: 'white',
        padding: '40px 30px',
        borderRadius: '10px',    // 稍微增加圆角
        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', // 增强阴影效果
        boxSizing: 'border-box'
      }}>
        <div style={{ textAlign: 'center', marginBottom: '30px' }}>
          <h2 style={{ margin: 0, color: '#333', fontSize: '24px', fontWeight: 600 }}>
            注册账号
          </h2>
        </div>

        {error && (
          <div style={{
            color: '#dc3545',
            backgroundColor: '#f8d7da',
            border: '1px solid #f5c6cb',
            borderRadius: '4px',
            padding: '12px',
            marginBottom: '20px',
            textAlign: 'center'
          }}>
            {error}
          </div>
        )}

        <form onSubmit={handleRegister} style={{ width: '100%' }}>
          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '8px', color: '#333', fontSize: '14px' }}>
              用户名
            </label>
            <input
              type="text"
              name="username"
              value={form.username}
              onChange={handleChange}
              required
              style={{
                width: '100%',
                padding: '12px 15px',
                borderRadius: '4px',
                border: '1px solid #ddd',
                fontSize: '16px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '8px', color: '#333', fontSize: '14px' }}>
              密码
            </label>
            <input
              type="password"
              name="password"
              value={form.password}
              onChange={handleChange}
              required
              style={{
                width: '100%',
                padding: '12px 15px',
                borderRadius: '4px',
                border: '1px solid #ddd',
                fontSize: '16px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <div style={{ marginBottom: '25px' }}>
            <label style={{ display: 'block', marginBottom: '8px', color: '#333', fontSize: '14px' }}>
              邮箱
            </label>
            <input
              type="email"
              name="email"
              value={form.email}
              onChange={handleChange}
              required
              style={{
                width: '100%',
                padding: '12px 15px',
                borderRadius: '4px',
                border: '1px solid #ddd',
                fontSize: '16px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <button
            type="submit"
            style={{
              width: '100%',
              padding: '12px',
              backgroundColor: '#0d6efd',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              fontSize: '16px',
              fontWeight: 500,
              cursor: 'pointer',
              boxSizing: 'border-box'
            }}
          >
            注册
          </button>
        </form>

        <div style={{ textAlign: 'center', marginTop: '15px' }}>
          <Link to="/login" style={{
            color: '#0d6efd',
            textDecoration: 'none',
            fontSize: '14px'
          }}>
            已有账号？去登录
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Register;